<template>
    <div class="Box">

            <el-popover
                placement="top-start"
                :width="380"
                :show-arrow="false"
                trigger="hover"
                @before-enter="getAvaInfos(props.mid)"
            >
                <template #reference>
                    <div class="avatarBox">
                        <img :src="props.member.avatar" />
                            <template v-if="props.member.user_sailing && props.member.user_sailing.pendant" >
                                <img :src="props.member.user_sailing.pendant.image_enhance" class="headAvaBefore"/>
                            </template>
                    </div>
                </template>
                <template #default v-if="upCardInfo">
                    <up-info-box 
                        :card="upCardInfo.card"
                        :space="upCardInfo.space"
                        :like_num="upCardInfo.like_num"
                        :following="upCardInfo.following"
                    >
                    </up-info-box>
                </template>
            </el-popover>

        <div class="contentBox">
            <div class="nameLeveBox" :style="props.member.user_sailing?.cardbg?'':'margin-top:20px'">
                <p>
                    <el-popover
                        placement="top-start"
                        :width="380"
                        :show-arrow="false"
                        trigger="hover"
                        @before-enter="getAvaInfos(props.mid)"
                    >
                        <template #reference>
                            <span :style="{ 'color':props.member.vip.nickname_color }">{{ props.member.uname }}</span>
                        </template>
                        <template #default v-if="upCardInfo">
                            <up-info-box 
                                :card="upCardInfo.card"
                                :space="upCardInfo.space"
                                :like_num="upCardInfo.like_num"
                                :following="upCardInfo.following"
                            >
                            </up-info-box>
                        </template>
                    </el-popover>

                    <span class="level">LV{{ props.member.level_info.current_level }}</span>
                </p>
                <template v-if="props.member.user_sailing && props.member.user_sailing.cardbg">
                    <div class="afterBox">
                        <img :src="props.member.user_sailing.cardbg.image" />
                        <div :style="{ 'color':props.member.user_sailing.cardbg.fan.color }">
                            <span>NO.</span>
                            <span>{{ props.member.user_sailing.cardbg.fan.num_desc }}</span>
                        </div>
                    </div>
                </template>
            </div>
            <p :style="props.member.user_sailing?.cardbg?'':'padding-top:10px'">
                <span ref="messageRef" v-html="initMessage"></span>
            </p>
            <p>
                <span>{{ NowBetwYMDDate(props.ctime) }}</span>
                <span><img src="@/assets/videoIcon/dianzanSmall.png"/>{{ remove0(props.like) }}</span>
                <span><img src="@/assets/videoIcon/noDZ.png"/></span>
                <el-button text @click="reply">回复</el-button>
            </p>
            <template v-if="props.card_label">  
                <p>
                    <span   v-for="item in props.card_label" 
                            :key="item.rpid" 
                            :style="{ color:item.text_color_day,background:item.label_color_day }"
                            >
                            {{ item.text_content }}
                    </span>
                </p>
            </template>
            <template v-if="props.replies" >
                <div  class="otherComBox"> 
                    <span v-for="item in otherComment" :key="item.rpid" class="otherItem">
                        <other-com-item
                            :member="item.member"
                            :content="item.content"
                            :ctime="item.ctime"
                            :like="item.like"
                            :mid="item.mid"
                            >
                        </other-com-item>
                    </span>
                    <span v-if="isShowAllButton" class="allAtherCom">{{ props.reply_control.sub_reply_entry_text }}，
                        <span @click="getAllCom" >点击查看</span>
                    </span>
                    <span v-if="isShowAll && otherPage.count > otherPage.size" class="pageAtherCom">
                        <span>共{{ Math.ceil(otherPage?.count / otherPage?.size) }}页</span>
                        <span v-if="pn !== 1 " @click="pn--">上一页</span>
                        <span   v-for="item in Math.ceil(otherPage?.count / otherPage?.size)" 
                                :key="item"
                                :style="pn === item?'color: #008AC5':''"
                                @click="pn = item"
                                >{{ item }}</span>
                        <span v-if="pn !== Math.ceil(otherPage?.count / otherPage?.size)" @click="pn++">下一页</span>
                    </span>
                </div>
            </template>
        </div>
    </div> 

</template>

<script lang="ts" setup>
import { NowBetwYMDDate } from '@/utils/format'
import { computed,watch,ref, Ref, reactive } from 'vue'
import { Comment,upCardInfo } from '../typeInterface'
import { otherComItem } from '../components'
import upInfoBox from './upInfoBox.vue'
import { getCookies } from '@/utils/cookies'
import { get } from '@/http/axios'
import { getAvaInfo } from '@/http/httpFunction'
import { handleMessage } from '../hooks/useInitStringEmote'
import { emotoToHtml } from '@/utils/strHTML'

interface Props extends Comment{

}
const props = defineProps<Props>()

let isShowAll = ref<boolean>(false)
let otherComment:Ref<Array<Comment>> = ref(props.replies)  //评论数组
let otherPage = reactive({
    num:0,
    count:0,
    size:10
})

let pn = ref<number>(1)         //子集当前页数
let page = ref<number>(10)      //子集当前页数据量
let type = ref<number>(1)       //类型 1.最热 2.最新 
let upCardInfo:Ref<upCardInfo | undefined> = ref() 
const messageRef = ref()

function reply(){
    console.log('回复')
}
//获得该评论全部子集
function getAllCom(){
    isShowAll.value = true
    let csrf = getCookies('bili_jct')
    get('/x/v2/reply/reply?csrf='+ csrf +'&oid='+ props.oid +'&pn='+ pn.value +'&ps='+ page.value +'&root='+ props.rpid +'&type='+ type.value,'','/bili')
    .then((res:any) => {
        console.log('评论子集',res)
        otherComment.value = res.data.replies
        otherPage = res.data.page
    })
    .catch((res:any) => {
        alert('获得评论子集失败')
    })
}
//得到头像/@展示的up主信息
function getAvaInfos(mid:number){
    return getAvaInfo(mid).then(res => { upCardInfo.value = res })
}
//为0 直接去掉
const remove0 = computed(() => (val:number) => {
    if (!val) return ""
    else return val
})
//处理字符串 为其中加入表情/img/@
const initMessage = computed(() => {    
    //这个方案 性能堪忧
    // nextTick(() => {
    //     return emotoToHtml(messageRef.value,props.content)
    // })

    return handleMessage(props.content)
})

//判断此评论是否还有展开项
const isShowAllButton = computed(() => {
    let num = Number( props.reply_control.sub_reply_entry_text.slice(1,2) )
    if (num === props.replies.length || isShowAll.value) return false  //评论数小于默认容量 -> 3
    else return true
})
watch(()=>pn.value,()=>{
    getAllCom()
})
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/publicNodeStyle.scss);
p{
    margin: 0;
    padding: 0;
}
.Box{
    padding-left: 10px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;

}
.avatarBox{
    display: flex;
    width: 8%;
    height: 100%;
    min-width: 75px;
    position: relative;
    & img:nth-child(1){
        position: absolute;
        left: 15px;
        top: 15px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
}
.headAvaBefore{
    position: absolute;
    top: 10;
    left: 0;
    width: 80px;
    height: 80px;
}
.contentBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    border-bottom: 1px solid #E3e5e7;
    padding-bottom: 20px;
    & p:nth-child(2){
        padding: 0 0 10px 0;
        color: #18191C;
        font-size: 15px;
        text-align: left;
        white-space: pre-line;
    }
    & p:nth-child(3){
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 20px;
        color: #9499A0;
        font-size: 13px;
    }
    & p:nth-child(3) span{
        @include flexRowCenter;
    }
    & p:nth-child(3) span:nth-child(2) img{
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
    & p:nth-child(3) span:nth-child(3) img{
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }
    & p:nth-child(4){
        display: flex;
        gap: 10px;
        font-size: 13px;
        margin-top: 5px;
    }
    & p:nth-child(4) span{
        padding: 3px 5px;
        border-radius: 4px;
    }
}
.nameLeveBox{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#61666D;
    font-size: 13px;
    & p:nth-child(1){
        width: 50%;
        display: flex;
    }
    & p:nth-child(1) span:nth-child(1){
        cursor: pointer;
    }
}

.otherComBox{
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap:15px 0;
}
.otherItem{
    display: flex;
}
.allAtherCom{
    width: 100%;
    color: #9499A0;
    font-size: 13px;
    text-align: left;
    & span{
        cursor: pointer;
    }
    & span:hover{
        color: #008AC5;
    }
}
.pageAtherCom{
    width: 100%;
    display: flex;
    gap: 10px;
    color: #18191C;
    font-size: 13px;
    text-align: left;
    & span{
        cursor: pointer;
    }
    & span:first-child{
        cursor: default;
        color: #18191C;
    }
    & span:hover{
        color: #008AC5;
    }
    & span:first-child{
        color: #18191C;
    }
}
.afterBox{
    display: flex;
    justify-content: end;
    align-items: center;
    width: 50%;
    height: 60px;
    & img{
        height: 100%;
    }
    & div:nth-child(2){
        scale: 0.7;
        margin-bottom: 10px;
        margin-left: -60px;
        display: flex;
        flex-direction: column;
        align-items: start;
        font-size: 13px;
    }
}
</style>